<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>组件的嵌套</title>
</head>

<body>
    <!-- 
        关于VueComponent
            1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的 时vue.extend生成的
            
            2.我们只需要写<school></school> vue解析时会帮我们创建school组件的实例对象
              即vue帮我们执行 new VueComponent（option）

            3.特别注意：每次调用vue.extend。 返回的都是一个全新的VueComponent ！！！

            4.关于this指向
                1.组件配置中：
                    data函数、methods中的函数、watch中的函数、computed中的函数  他们的this指向都是 VueComponent 实例对象
                2.new Vue()配置中
                    data函数、methods中的函数、watch中的函数、computed中的函数  他们的this指向都是 Vue实例对象

            5.VueComponent 实例对象以后简称vc  也可称为 组件实例对象
                Vue 的实例对象  简称 vm


     -->
    <div id="root">
        <school></school>
        <hello></hello>

    </div>


    <script>
        const school = Vue.extend({
            name: 'School',
            template: '<div> <h3>学校：{{school}}</h3>\n' +
                '        <h3>地址：{{dizhi}}</h3><button @click="showname">点我显示学校</button></div>>',
            data() {
                return {
                    school: '超神学院',
                    dizhi: '扭曲丛林',
                }

            },
            methods: {
                showname() {
                    alert(this.school)
                    console.log("@@@", this)
                }
            },

        })


        const test = Vue.extend({
            template: '<div> <h2>11111</h2></div>>',

        })

        const hello = Vue.extend({
            name: 'Hello',
            template: '<div> <h2>{{msg}}</h2><test/></div>>',
            data() {
                return {
                    msg: '欢迎来到英雄联盟'
                }

            },
            components: {
                test
            }
        })

        console.log("@", school)
        console.log("#", hello)
        console.log("$", school === hello)


        const vm = new Vue({
            el: '#root',
            components: {
                school: school,
                hello: hello
            }
        })
    </script>
</body>

</html>